{% extends 'base.html' %}
{% load staticfiles %}


{% block title %}
    课程机构列表 - 谷粒教育网
{% endblock %}


{% block content %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
{#                <li><a href="{% url 'index' %}">首页</a>></li>#}
                <li><a href="/">首页</a>></li>
                <li>课程机构</li>
            </ul>
        </div>
    </section>
    <section>
        <div class="wp butler_list_box list">
            <div class='left'>
                <div class="listoptions">
                    <ul>
                        <li>
                            <h2>机构类别</h2>
                            <div class="cont">
                                <a href="?&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == '' %} class="active2" {% endif %}>全部</span></a>

                                <a href="?cate=pxjg&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == 'pxjg' %} class="active2" {% endif %}>培训机构</span></a>

                                <a href="?cate=gx&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == 'gx' %} class="active2" {% endif %}>高校</span></a>

                                <a href="?cate=gr&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == 'gr' %} class="active2" {% endif %}>个人</span></a>

                            </div>
                        </li>
                        <li>
                            <h2>所在地区</h2>
                            <div class="more">更多</div>
                            <div class="cont">
                                <a href="?&cate={{ cate }}&sort={{ sort }}"><span {% if cityid == ''%} class="active2" {% endif %}>全部</span></a>
                                {% for city in all_citys %}
                                    {# 把数据类型变成字符串类型,i固定写法  city.id|stringformat:'i' #}
                                    <a href="?cityid={{ city.id }}&cate={{ cate }}&sort={{ sort }}"><span {% if cityid == city.id|stringformat:'i'%} class="active2" {% endif %}>{{ city.name }}</span></a>
                                {% endfor %}

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="all">共<span class="key">{{ all_orgs.count }}</span>家</div>
                <div class="butler_list company list">
                    <div class="layout">
                        <div class="head">
                            <ul class="tab_header">
                                <li {% if sort == ''%} class="active" {% endif %}><a href="?&cityid={{ cityid }}&cate={{ cate }}">全部</a> </li>
                                <li {% if sort == 'study_num'%} class="active" {% endif %}><a href="?sort=study_num&cityid={{ cityid }}&cate={{ cate }}">学习人数 &#8595;</a></li>
                                <li {% if sort == 'course_num'%} class="active" {% endif %}><a href="?sort=course_num&cityid={{ cityid }}&cate={{ cate }}">课程数 &#8595;</a></li>
                            </ul>
                        </div>

                        {% for org in pages %}
                            <dl class="des difdes">
                                <dt>
                                    <a href="{% url 'orgs:org_detail' org.id %}">
                                        <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ org.image }}"/>
                                    </a>
                                </dt>
                                <dd>
                                    <div class="clearfix">
                                        <a href="{% url 'orgs:org_detail' org.id %}">
                                            <h1>{{ org.name }}</h1>
                                            <div class="pic fl">

                                                <img src="{% static 'images/authentication.png' %}"/>

                                                <img src="{% static 'images/gold.png' %}"/>

                                            </div>
                                        </a>
                                    </div>
                                    <ul class="cont">
                                        <li class="first"><p class="pic9">课程数：<span>{{ org.course_num }}</span></p><p class="c7">学习人数：<span>{{ org.study_num }}</span></p></li>
                                        <li class="c8" style="padding-left:18px;">{{ org.address }}</li>
                                        <li class="pic10" style="padding-left:18px;">经典课程：
                                        {#  反向查询机构下的所有课程,并使用过滤器切片操作 获取两个课程 #}
                                        {% for course in org.courseinfo_set.all|slice:':2' %}
                                            <a href="{% url 'courses:course_detail' course.id %}">{{ course.name }}</a>
                                        {% endfor %}

                                        </li>
                                    </ul>
                                </dd>
                                <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div>
                            </dl>
                        {% endfor %}


                    </div>
                    <div class="pageturn">
                        <ul class="pagelist">
                            {# 分页显示 #}
                            {# 是否有上一页,有就获取上一页的页码值 #}
                            {% if pages.has_previous %}
                                <li class="long"><a href="?page_num={{ pages.previous_page_number }}&cate={{ cate }}&cityid={{ cityid }}&sort={{ sort }}&keywords={{ keywords }} ">上一页</a></li>
                            {% endif %}

                            {# 所有页码值 #}
                            {% for num in pages.paginator.page_range %}
                                {# 选中当前页码进行标识 #}
                                <li {% if num == pages.number %} class="active" {% endif %} ><a href="?page_num={{ num }}&cate={{ cate }}&cityid={{ cityid }}&sort={{ sort }}&keywords={{ keywords }} ">{{ num }}</a></li>
                            {% endfor %}

                            {# 是否有下一页,有就获取下一页的页码值 #}
                            {% if pages.has_next %}
                                <li class="long"><a href="?page_num={{ pages.next_page_number }}&cate={{ cate }}&cityid={{ cityid }}&sort={{ sort }}&keywords={{ keywords }} ">下一页</a></li>
                            {% endif %}

                        </ul>
                    </div>
                </div>
            </div>
            <div class="right companyright">
                <div class="head">我要学习</div>
                <form class="rightform" id="jsStayForm">
                    <div>
                        <img src="{% static 'images/rightform1.png' %}"/>
                        <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25" />
                    </div>
                    <div>
                        <img src="{% static 'images/rightform2.png' %}"/>
                        <input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/>
                    </div>
                    <div>
                        <img src="{% static 'images/rightform3.png' %}"/>
                        <input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50" />
                    </div>
                    <p class="error company-tips" id="jsCompanyTips"></p>
                    <input class="btn" type="submit" id="jsStayBtn" value="立即咨询 >" />
                </form>
            </div>
            {# 授课机构排名 - 按收藏数排序 #}
            <div class="right companyrank layout">
                <div class="head">授课机构排名</div>
                {% for org in sort_orgs %}
                    <dl class="des">
                        <dt class="num fl">{{ forloop.counter }}</dt>
                        <dd>
                            <a href="{% url 'orgs:org_detail' org.id %}"><h1>{{ org.name }}</h1></a>
                            <p>{{ org.address }}</p>
                        </dd>
                    </dl>
                {% endfor %}
            </div>

        </div>

    </section>
{% endblock %}


{% block myjs %}
   <script>
        // 页面加载完成后执行
        $(function () {
            // 获取id为jsStayBtu的提交按钮
            $("#jsStayBtn").click(function () {
                // 获取form表单数据
                var name = $("#companyName").val();
                var phone = $("#companyMobile").val();
                var course = $("#companyAddress").val();
                // 发送ajax请求
                $.ajax({
                    url: "{% url 'operations:user_ask' %}",  // 发送请求
                    data: {  // 请求数据
                        'name': name,
                        'phone': phone,
                        'course': course,
                        'csrfmiddlewaretoken': '{{ csrf_token }}',
                    },
                    type: "POST",  // 请求方式
                    dataType: "json",  // 服务器响应数据类型
                    success: function (data) {  // 请求成功后的服务器回调函数,data为响应数据
                        if(data.status == 'ok'){  // 咨询成功
                            alert(data.msg);
                            // 重置标签数据
                            $('#companyName').val('');
                            $('#companyMobile').val('');
                            $('#companyAddress').val('');
                            $('#jsCompanyTips').text('');
                        }else{  // 咨询失败
                            alert(data.msg);
                            $('#jsCompanyTips').text(data.msg);  // 数据验证失败返回的信息,即手机号验证失败
                        }
                    },
                });
                // 如果不想让submit有提交的动作,那么就需要在事件函数的最后返回false,阻止提交动作的发生
                return false;
            });
        })

   </script>

{% endblock %}

